<template>
  <div class="address-view">
    <van-nav-bar
      left-text="收货地址"
      left-arrow
      fixed
      @click-left="navigatePersonInfo"
      right-text="新增地址"
      @click-right="onAdd"
    />
    <van-empty description="您还没有地址信息" v-if="!isNull" />
    <van-address-list v-else v-model="chosenAddressId" :list="list" @edit="onEdit" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      chosenAddressId: "1",
      isNull: true,
      list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true
        },
        {
          id: "2",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true
        },
        {
          id: "3",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true
        },
        {
          id: "4",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true
        },
        {
          id: "5",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true
        },
        {
          id: "6",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true
        },
        {
          id: "7",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true
        },
        {
          id: "8",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true
        }
      ]
    };
  },
  mounted() {
    this.isNull = this.list.length > 0 ? true : false;
    this.getAddressInfo();
  },
  watch: {
    $route(to, from) {
      if (from.path === "/addAddress") {
        this.getAddressInfo();
      }
    }
  },
  methods: {
    navigatePersonInfo() {
      this.$router.push("/personInfo");
    },
    onAdd() {
      this.$router.push("/addAddress");
    },
    onEdit() {
      this.$router.push("/editAddress");
    },
    getAddressInfo() {
      console.log(this.$store.state.addressInfoArr);
    }
  }
};
</script>
<style lang="less">
.address-view {
  padding-top: 46px;
  overflow: scroll;
  height: 100%;
}
.van-address-list {
  padding: 12px;
}
.van-address-list__bottom {
  display: none;
}
.van-nav-bar__left {
  .van-nav-bar__text {
    font-size: 16px;
    padding-left: 10px;
  }
}
.van-nav-bar__text {
  color: #323233;
}
</style>